<template>
  <div id="app" class="bg">
      <!-- 一、导航栏 -->
      <header class="header">
        <nav class="container">
          <img src="@/assets/images/sun.svg" alt="">
          <p style="font-size:26px; cursor:pointer">新中地天气</p>
          <div class="position" style="font-size:18px">{{address}}</div>
          <div class="liveWeather" style="font-size:14px">实时天气：{{weather}}{{temperature}}℃</div>
          <div class="wind" style="font-size:14px">{{windDir}}风{{windPow}}级</div>
          <div class="btn">
            <a href="#"><i class="fa fa-info-circle info" @click="getInformation"></i></a>
            <a href="#" v-if="$store.state.isPlus"><i class="fa fa-plus" @click="storeInfo"></i></a>
          </div>       
        </nav>
              
      </header>

      <!-- info图标按钮的弹框内容 -->
      <div class="about" v-show="isShow">
            <h2>关于：</h2>
            <p>这个应用可以用来追踪你选择城市的当前天气</p>
            <h2>如何使用：</h2>
            <p>1.点击搜索框输入你希望追踪的城市</p>
            <p>2.在搜索结果中选中一个城市，你将获取当地最新的天气</p>
            <p>3.点击右侧的＋号可以将追踪城市的天气情况保存在首页</p>
            <h2>移除城市：</h2>
            <p>如果你不想在首页关注某个城市,可以通过底部的按钮删除它</p>
            <button class="btn" @click="isShow=false">关闭</button>
      </div>

      <!-- 二、主体部分 -->
      <main class="main">
        <div class="container">
          <router-view></router-view>
        </div>
      </main>   
  </div>
</template>

<script>
const axios = require('axios');

export default {
  name: 'app',
  data(){
    return{
      /* header部分的数据 */
      address:'',
      weather:'',
      temperature:'',
      windDir:'',
      windPow:'',

      /* code:'',
      city:'', */
      isShow:false,
      i : 0,
      savedCities:[],
      unsaved:false,
    }
  },
  mounted(){
    this.initAddress()
  },
  methods:{
    async initAddress(){
      /* 1. 通过默认IP查询地址 */
      const res = await axios.get('https://restapi.amap.com/v3/ip?key=76dd8c6deab6cb7638ee9a9e77ae197d')    
      this.address = res.data.city
      /* 2.通过地址名得到地区编码 */
      const res1 = await axios.get(`https://restapi.amap.com/v3/geocode/geo?address=${this.address}&key=76dd8c6deab6cb7638ee9a9e77ae197d`)
      /* 3.通过编码获取天气 */
      const res2 = await axios.get(`https://restapi.amap.com/v3/weather/weatherInfo?city=${res1.data.geocodes[0].adcode}&extensions=base&key=76dd8c6deab6cb7638ee9a9e77ae197d`)

      /* 赋值：使得header栏得到数据 */
      const obj = res2.data.lives[0];
      this.weather = obj.weather
      this.temperature = obj.temperature
      this.windDir = obj.winddirection
      this.windPow =obj.windpower
    },

    /* 点击事件，使得info框显示 */
    getInformation(){
      this.isShow = true
    },

    /* 查询后，“ + ”实现的功能 ：将数据写入localStorage中 */
    storeInfo(){
      const id = ++this.i
      const adcode = this.$store.state.code
      const city = this.$store.state.city
      const newCity = {id,adcode,city}
      this.savedCities.push(newCity)
      localStorage.setItem('savedCities',JSON.stringify(this.savedCities))

      /* 点击后就关掉 */
      this.$store.state.isPlus = false

      /*数据通信 为 保存后的数据条加载准备  */
      this.$store.dispatch('changeUnsaved')
    }
  }
}
</script>

<style>
@import url('~@/assets/styles/reset.css');
.header{
  position: sticky;
  top: 0;
  height: 80px;
  color: #fff;
  box-shadow: 0 0 5px 0 rgba(0,0,0,0.5);
  background-color: rgba(0,102,138,1);
  position: sticky;
}
.header .container{
  display: flex;
  flex: 1;
  align-items: center;
  width: 720px;
  line-height: 80px;
  margin: 0 auto;
  gap: 20px;
}
.header .container .btn{
  margin-left: auto;
}
.header .container i{
  color:#fff;
  font-size:22px;
  margin: 5px;
}
.header .container .info:hover{
  color:rgb(14, 32, 53)
}

#app .about{
  position: fixed;
  z-index: 99;
  color: #000;
  background-color: #fff;
  padding: 0 15px;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 300px;
  height: 340px;
  transform: translate(0, 0);
  background-color: #fff;
}
#app .about h2{
  font-size: 18px;
  margin-top: 25px;
  margin-bottom: 5px;
}
#app .about p{
  font-size: 12px;
  line-height: 18px;
}
#app .about .btn{
  color: #fff;
  background-color: rgba(0,102,138,1);
  padding: 5px 20px;
  border: none;
  margin-top: 30px;
}
</style>
